<template>
  <view class="tabBotPage">
    <view class="part1">
      <view class="part11">
        <view
          class="part111"
          v-for="(item, index) in list"
          :key="index"
          @click="tabItemBtn(item)"
          :class="tabBotName.text === item.text && 'tabBot-on'"
        >
          <image
            class="part1111"
            :src="tabBotName.text === item.text ? item.selectedIconPath : item.iconPath"
            alt=""
          ></image>

          <view class="part1112">{{ item.text }}</view>
          <div class="part1113" v-if="CartGoodsNum > 0 && index === 1">
            {{ CartGoodsNum > 99 ? '99+' : CartGoodsNum }}
          </div>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    tabBotName() {
      return this.$store.state.app.tabBotName
    },
    CartGoodsNum() {
      return this.$store.state.app.CartGoodsNum
    },
    list() {
      return this.$store.state.app.tabsList
    },
  },
  mounted() {
    if (!this.tabBotName) {
      this.tabItemBtn(this.list[0])
    } else {
      this.$parent.set_onShow()
    }
  },
  methods: {
    tabItemBtn(i) {
      let topic = uni.getStorageSync('topic')
      let token = uni.getStorageSync('token')
      if (topic && topic.state == 1 && i.text !== '首页') {
        uni.showToast({
          title: '活动未开始',
          icon: 'none',
        })
        return
      }
      if (i.text === '客服') {
        if (token) {
          uni.makePhoneCall({
            phoneNumber: '4000086770',
          })
        } else {
          uni.navigateTo({
            url: '/pages/auth/login/login',
          })
        }
      } else {
        this.$store.dispatch('app/on_tabBotName', i)
      }
      this.$parent.set_onShow()
    },
  },
}
</script>

<style lang="scss" scoped>
.tabBotPage {
  height: var(--bot-height);
  .part1 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--bot-height);
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #dedede;
    z-index: 200;
    .part11 {
      padding-top: 17rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .part111 {
        width: 20%;
        text-align: center;
        position: relative;
        line-height: 22rpx;
      }
      .part1111 {
        width: 44rpx;
        height: 44rpx;
      }
      .part1112 {
        font-size: 22rpx;
        color: #898b8d;
        padding-top: 8rpx;
      }
      .part1113 {
        position: absolute;
        top: 0;
        right: 10rpx;
        background: #ff742a;
        padding: 6rpx;
        min-width: 34rpx;
        border-radius: 34rpx;
        line-height: 22rpx;
        color: #fff;
        font-size: 22rpx;
      }
      .tabBot-on {
        .part1112 {
          color: #ff654b;
        }
      }
    }
  }
}
</style>
